<template>
  <SwipePagination v-model="page" :can-swipe="canSwipe">
    <PopularCreators @creator="onCreator"></PopularCreators>
    <template #page-2>
      <Viewer :router="viewerRouter" @back="page = 1"></Viewer>
    </template>
  </SwipePagination>
</template>
<script setup>
import { computed, defineAsyncComponent, ref, watch } from 'vue'
import Viewer from '@/components/viewer/Viewer.vue'
import { useMobileViewerRouter } from '@/compositions/viewer/router/mobileViewerRouter'
import PopularCreators from './PopularCreators.vue'

const SwipePagination = defineAsyncComponent(() => import('@/components/swipe/SwipePagination.vue'))

const page = ref(1)

const viewerRouter = useMobileViewerRouter('mobile-popular-creators')
const { currIndex, active, revertPath } = viewerRouter

const canSwipe = computed(() => page.value === 2 && currIndex.value === 0)

function onCreator(aff, username) {
  viewerRouter.setFromCreator(aff, username)
  page.value = 2
}

watch(page, (v) => {
  if (v === 1) {
    active.value = false
    revertPath()
  } else {
    active.value = true
  }
})
</script>
